<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片检测</title>
    <script src="js/jquery-3.1.1.min.js"></script>
    <script src="js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .index {
            background-image: url(image/index.jpeg);
            background-size: cover;
            background-repeat: no-repeat;
            overflow: hidden;
            height: 100%;
        }

        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }

        .avatar {
            width: 500px;
            height: 300px;
            display: block;
        }
    </style>
</head>
<body class="index">
<div id="myApp">


    <el-card style="position: fixed;left:32%;top:30%;width: 600px">
        <div slot="header">
            <el-button type="primary" round  @click="detect_img">图片检测</el-button>
        </div>
        <div class="text item">
            <el-upload
                    class="avatar-uploader"
                    action
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
            >
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </div>

    </el-card>



</div>

</body>
<script>
 new Vue({
        el: "#myApp",//绑定元素
        data: {
            imageUrl: '',//图片地址
            file_raw:"",//图片数据

        },
        methods: {
            handleAvatarSuccess(res, file) {
                    this.imageUrl = URL.createObjectURL(file.raw);
                    this.file_raw = file.raw;
                    console.log(this.imageUrl);
                    console.log(this.file_raw);
            },
            detect_img() {//图片检测
                //创建form对象
                const form  = new FormData();
                //定义表单 的文件数据
                form.append("file",this.file_raw);
                //创建vue对象
                const self = this;
                //发送ajax请求
                $.ajax({
                    url:"/detect_img/",
                    type:"POST",//请求方式，文件提交指定的提交方式
                    data:form,//文件数据
                    processData:false,//告诉ajax不要处理数据
                    contentType:false,//告诉ajax不要设置请求头
                    success:function (rs) {
                        console.log(rs);
                        if (rs.code ===200){
                            self.$message("检测成功");
                            //把检测图片结果路径赋值给imagerUlr
                            self.imageUrl = rs.resultUrl;
                        }
                    }


                })


            }


        }

    })
</script>

</html>